<template>
  <a-drawer
    :title="title"
    :width="420"
    :visible.sync="visible"
    :body-style="{ paddingBottom: '40px' }"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose"
  >
    <a-form ref="createModuleForm" :model="formData" layout="horizontal" size="small">
      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item label="模块名称" name="name">
            <a-input size="small" v-model:value="formData.name" allowClear />
          </a-form-item>
        </a-col>
      </a-row>
      <!-- <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item label="服务名" name="serviceName">
            <a-input v-model:value="formData.serviceName" allowClear />
          </a-form-item>
        </a-col>
      </a-row> -->
      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item label="是否发布" name="publishService">
            <a-radio-group size="small" v-model="formData.publishService" defaultValue="0">
              <a-radio-button value="1">上线</a-radio-button>
              <a-radio-button value="0">下线</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <!-- <template #extra> -->
    <a-space>
      <a-button size="small" @click="onClose">取消</a-button>
      <a-button size="small" type="primary" @click="onSubmit">提交</a-button>
      <a-button
        size="small"
        @click="
          () => {
            this.formData = { ...this.formData, ...this.initForm() }
          }
        "
        >随机</a-button
      >
    </a-space>
    <!-- </template> -->
  </a-drawer>
</template>
<script>
import { failmsg } from '@/api/api'
import { create, update } from '@/api/mock-module'
import Mock from 'mockjs2'

export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    form: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      title: '',
      visibleInner: this.visible,
      formData: {},
    }
  },
  watch: {
    form: {
      handler(newValue) {
        if (newValue && newValue.isEdit) {
          this.formData = { ...newValue }
          this.title = '编辑模块'
        } else {
          this.formData = { ...this.initForm() }
          this.title = '新建模块'
        }
      },
      immediate: true,
    },
  },
  methods: {
    onOpen() {
      console.log('打开编辑页')
    },
    onSubmit() {
      const param = JSON.parse(JSON.stringify(this.formData))
      console.log(param)
      if (param.id) {
        update(param)
          .then(() => {
            this.$emit('handle-ok')
          })
          .catch((err) => failmsg(err))
      } else {
        create(param)
          .then(() => {
            this.$emit('handle-ok')
          })
          .catch((err) => failmsg(err))
      }
    },
    onClose() {
      this.formData = this.initForm()
      this.$emit('handle-cancel')
    },
    initForm() {
      return {
        name: Mock.mock('@ctitle(3,7)'),
        // serviceName: Mock.mock('@word(5, 10)'),
        publishService: String(Mock.mock('@integer(0, 1)')),
      }
    },
  },
}
</script>
